<template>
    <div class="sjfx-container">
        <template v-if="screenWidth > 1920">
            <div class="sjfx-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
                <template v-if="item.position === 'banner'">
                    <img :src="item.image_url" alt="" style="width: 100%; height: auto; object-fit: cover;">
                </template>
            </div>
        </template>
        <template v-else>
            <div class="sjfx-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
                <template v-if="item.position === 'banner'">
                    <img :src="item.image_url" alt="">
                </template>
            </div>
        </template>
        <div class="sjfx-content-title">
            <strong>数据统计</strong>
        </div>
        <el-divider content-position="center">
            <div class="line"></div>
        </el-divider>
        <div class="sjfx-box1-content">
            <div class="sjfx-box1-p">
                华胜讯自主开发的数据分析统计及设备管理系统，可对各租赁箱内设备进行统计管控，对比营收<br>
                数据较日，周，总占比等。手机小程序登录简单快捷，随时随地查看设备状况和营收情况。多语<br>
                言管理系统可统计各种语言使用占比，便于了解分析游客来源。
            </div>
            <div class="sjfx-box-item">
                <div class="sjfx-box1">
                    <div class="sjfx-box1-image">
                        <template v-if="imgArr.length > 0">
                            <img :src="imgArr[0].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box1-details">
                        <div class="sjfx-box1-title">
                            <strong>PC端</strong>
                        </div>
                        <div class="sjfx-box1-description">
                            多语言管理系统
                        </div>
                        <div class="sjfx-box1-revenue">
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/车辆管理.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>车辆管理</strong>
                                </div>
                            </div>
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/统计分析.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>乘客统计</strong>
                                </div>
                            </div>
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/设备检测.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>设备检测</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sjfx-box1">
                    <div class="sjfx-box1-image">
                        <template v-if="imgArr.length > 0">
                            <img :src="imgArr[1].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box1-details">
                        <div class="sjfx-box1-title">
                            <strong>手机端</strong>
                        </div>
                        <div class="sjfx-box1-description">
                            旅途听听小程序
                        </div>
                        <div class="sjfx-box1-revenue">
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/订单管理.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>订单管理</strong>
                                </div>
                            </div>
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/统计分析.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>数据分析</strong>
                                </div>
                            </div>
                            <div class="sjfx-icons">
                                <div class="sjfx-box1-icon">
                                    <img src="@/assets/景点管理.png" alt="">
                                </div>
                                <div class="sjfx-box1-revenue-title">
                                    <strong>景点管理</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjfx-box-item2">
                <div class="sjfx-box2-img">
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[0].image_url" alt="">
                    </template>
                </div>
                <div class="sjfx-box2-content">
                    <div class="sjfx-box2-title">
                        <el-divider content-position="left">
                            <div class="line"></div>
                        </el-divider>
                        操作便捷，功能完善稳定
                    </div>
                    <div class="box2-content">
                        <p>用户无需在多个页面中层层查找，通过首页快捷栏就能快速直达常用功能。</p>
                    </div>
                </div>
            </div>
            <div class="sjfx-box-item2">
                <div class="sjfx-box2-img">
                    <template v-if="imgArr2.length > 0">
                        <img :src="imgArr2[0].image_url" alt="">
                    </template>
                </div>
                <div class="sjfx-box2-content">
                    <div class="sjfx-box2-title">
                        <el-divider content-position="left">
                            <div class="line"></div>
                        </el-divider>
                        一目了然，直观判断运营策略
                    </div>
                    <div class="box2-content">
                        <p>
                            通过对比不同时间段的访问量、用户活跃度。转化率等数据，直观判断运营策略是否有效。
                        </p>
                        <br>
                        <p>
                            设备故障自动上报，精准定位故障设备，有利于提升运维效率。
                        </p>
                    </div>
                </div>
            </div>
            <div class="sjfx-content-title">
                <strong>部分案例</strong>
            </div>
            <el-divider content-position="center">
                <div class="line"></div>
            </el-divider>
            <div class="sjfx-box3">
                <div class="sjfx-box3-item">
                    <div class="sjfx-box3-item-img">
                        <template v-if="imgArr3.length > 0">
                            <img :src="imgArr3[0].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box3-item-details">
                        <div class="sjfx-box3-item-title">
                            <strong>广东省博物馆</strong>
                        </div>
                    </div>
                </div>
                <div class="sjfx-box3-item margin-top-30">
                    <div class="sjfx-box3-item-img">
                        <template v-if="imgArr3.length > 0">
                            <img :src="imgArr3[1].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box3-item-details">
                        <div class="sjfx-box3-item-title">
                            <strong>广东省博物馆</strong>
                        </div>
                    </div>
                </div>
                <div class="sjfx-box3-item">
                    <div class="sjfx-box3-item-img">
                        <template v-if="imgArr3.length > 0">
                            <img :src="imgArr3[2].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box3-item-details">
                        <div class="sjfx-box3-item-title">
                            <strong>广东省博物馆</strong>
                        </div>
                    </div>
                </div>
                <div class="sjfx-box3-item margin-top-30">
                    <div class="sjfx-box3-item-img">
                        <template v-if="imgArr3.length > 0">
                            <img :src="imgArr3[3].image_url" alt="">
                        </template>
                    </div>
                    <div class="sjfx-box3-item-details">
                        <div class="sjfx-box3-item-title">
                            <strong>广东省博物馆</strong>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSjfxList } from '@/api/rjxt'

const screenWidth = ref(window.innerWidth);
// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])
const imgArr2 = ref([])
const imgArr3 = ref([])

onMounted(() => {
    getSjfxList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
        imgArr2.value = rjxtList.value.filter(item => item.position === 'content_02')
        imgArr3.value = rjxtList.value.filter(item => item.position === 'content_03')
    })
})

</script>

<style scoped>
.sjfx-box1-image,
.sjfx-box3-item-img img {
    max-width: 100%;
    height: auto;
}

:deep(.el-divider__text.is-left){
    width: 100%;
    left: -30px;
    transform: translateY(-50%);
}

@media (min-width: 1025px) {
    .sjfx-box1-details {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .margin-top-30 {
        margin-top: 40px;
    }

    .sjfx-box3-item-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 22px;
        margin-top: 20px;
        margin-left: 5px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 100px;
    }

    .sjfx-box3-item {
        margin-left: 60px;
    }

    .box2-content {
        margin-top: 70px;
        margin-left: 50px;
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        padding-right: 60px;
    }

    .sjfx-box2-title {
        margin-top: 105px;
        margin-left: 50px;
        /* height: 100%; */
        word-wrap: break-word;
        color: #000000;
        font-size: 34px;
    }

    .sjfx-box2-content {
        width: 500px;
        height: 440px;

    }

    :deep(.sjfx-box2-content .el-divider--horizontal) {
        border-top: 0px;
        display: block;
        height: 1px;
        margin: 10px 10px;
        width: 100%;
    }

    .sjfx-box2-img {
        width: 700px;

        img {
            width: 700px;
            height: 440px;
        }
    }

    .sjfx-box1-revenue-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 14px;
    }

    .sjfx-box1-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
    }

    .sjfx-box1-title {
        background-color: blue;
        color: white;
        font-size: 18px;
        border-radius: 19px;
        width: 92px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 20px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box1-description {
        font-size: 14px;
        letter-spacing: 2px;
        margin: 30px 70px;
    }

    .sjfx-box1-revenue {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-left: -15px;
    }

    .sjfx-icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        margin-left: 20px;
    }


    .sjfx-box1 {
        margin-left: 110px;
        padding-right: 100px;
    }

    .sjfx-box-item2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .sjfx-box-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }

    .sjfx-box1-p {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .sjfx-box1-content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
    }

    .sjfx-container {
        width: 100%;
        height: 100%;
    }

    .sjfx-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .sjfx-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 120px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}

/* 媒体查询 平板电脑 */
@media (min-width: 769px) and (max-width: 1024px) {
    .sjfx-box1-details {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .margin-top-30 {
        margin-top: 40px;
    }

    .sjfx-box3-item-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 22px;
        margin-top: 20px;
        margin-left: 5px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 100px;
    }

    .sjfx-box3-item {
        margin-left: 15px;
    }

    .box2-content {
        margin-left: 50px;
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        padding-right: 60px;
    }

    .sjfx-box2-title {
        margin-top: 10px;
        margin-left: 50px;
        /* height: 100%; */
        word-wrap: break-word;
        color: #000000;
        font-size: 34px;
    }

    .sjfx-box2-content {
        width: 800px;
    }

    :deep(.sjfx-box2-content .el-divider--horizontal) {
        border-top: 0px;
        display: block;
        height: 1px;
        margin: 10px 10px;
        width: 100%;
    }

    .sjfx-box2-img {
        width: 700px;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .sjfx-box1-revenue-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 14px;
    }

    .sjfx-box1-icon {

        width: 40px;
        height: 40px;
        margin-bottom: 5px;
    }

    .sjfx-box1-title {
        background-color: blue;
        color: white;
        font-size: 18px;
        border-radius: 19px;
        width: 92px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 20px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box1-description {
        font-size: 14px;
        letter-spacing: 2px;
        margin: 30px 70px;
    }

    .sjfx-box1-revenue {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .sjfx-icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        margin-left: 20px;
        justify-content: center;
        align-content: center;
    }


    .sjfx-box1 {
        margin-left: 44px;
    }

    .sjfx-box-item2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .sjfx-box-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }

    .sjfx-box1-p {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .sjfx-box1-content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
    }

    .sjfx-container {
        width: 100%;
        height: 100%;
    }

    .sjfx-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .sjfx-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 120px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}

/* 媒体查询 移动端 */
@media (max-width: 768px) {
    /* .margin-top-30 {
        margin-top: 40px;
    } */

    .sjfx-box3-item-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 22px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 100px;
    }

    .sjfx-box3-item {
        margin-left: 30px;
        margin-top: 30px;
    }

    .box2-content {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        padding: 0 50px;
    }

    .sjfx-box2-title {
        margin-top: 10px;
        padding: 0 50px;
        /* height: 100%; */
        word-wrap: break-word;
        color: #000000;
        font-size: 34px;
    }

    .sjfx-box2-content {
        max-width: 800px;
    }

    :deep(.sjfx-box2-content .el-divider--horizontal) {
        border-top: 0px;
        display: block;
        height: 1px;
        margin: 10px 10px;
        width: 100%;
    }

    .sjfx-box2-img {
        max-width: 390px;

        img {
            max-width: 390px;
            height: auto;
        }
    }

    .sjfx-box1-revenue-title {
        height: 100%;
        word-wrap: break-word;
        font-size: 14px;
    }

    .sjfx-box1-icon {

        width: 40px;
        height: 40px;
        margin-bottom: 5px;
    }

    .sjfx-box1-title {
        background-color: blue;
        color: white;
        font-size: 18px;
        border-radius: 19px;
        width: 92px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 20px;
        margin-left: 80px;

        strong {
            font-weight: normal;
        }
    }

    .sjfx-box1-description {
        font-size: 14px;
        letter-spacing: 2px;
        margin: 30px 70px;
    }

    .sjfx-box1-revenue {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-left: -15px;
    }

    .sjfx-icons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .sjfx-box1 {
        margin-bottom: 30px;
    }

    .sjfx-box-item2 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .sjfx-box-item {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }

    .sjfx-box1-p {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0 50px;
    }

    .sjfx-box1-content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
    }

    .sjfx-container {
        width: 100%;
        height: 100%;
    }

    .sjfx-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .sjfx-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 120px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}
</style>
